<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .move{
            width: 200px;
            height: 200px;
            background-color: darkblue;
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="move"></div>
    <script>
        var oMove = document.querySelector(".move");

        oMove.onmousedown = function( ev ){
            var oEvent = ev || event;
            var differX = oEvent.pageX - oMove.offsetLeft,
                differY = oEvent.pageY - oMove.offsetTop;
            document.onmousemove = function( ev ){
                var oEvent = ev || event;
                var finalX = oEvent.pageX - differX,
                    finalY = oEvent.pageY - differY;
                if(finalX < 30){
                    finalX = 0;
                }else if(finalX > document.documentElement.clientWidth - oMove.offsetWidth - 30){
                    finalX = document.documentElement.clientWidth - oMove.offsetWidth;
                }
                if(finalY < 30){
                    finalY = 0;
                }else if(finalY > document.documentElement.clientHeight - oMove.offsetHeight - 30){
                    finalY = document.documentElement.clientHeight - oMove.offsetHeight;
                }
                oMove.style.left = finalX + "px";
                oMove.style.top = finalY + "px";
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    </script>
</body>
</html>